<template>
    <div class="setting">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>专家设定</span>
                </div>
            </template>
            <!-- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div> -->


            <el-table v-if="tableData.value?.length > 0" :data="tableData.value" border style="width: 100%">
                <el-table-column type="index" label="序号" width="180" />
                <el-table-column prop="name" label="名字" />
                <el-table-column prop="操作" label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="opendialog(scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="deluser(scope.row)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
            <el-button class="mt-4" type="primary" plain style="margin-top:30px; width: 100%"
                @click="opendialog">新增</el-button>
        </el-card>


        <el-dialog v-model="dialogVisible" title="新增" width="30%" :before-close="handleClose">
            <el-form label-width="120px">
                <el-form-item label="专家名字">
                    <el-input v-model="form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="adduser">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive } from "vue"
import { addRater, raterList, edit_rater, del_rater } from "../../api/api"
import { ElMessage } from "element-plus"
let tableData = reactive({ value: [] })

const gettable = () => {
    raterList().then((res) => {
        tableData.value = res.data
    })
}
gettable()

let dialogVisible = ref(false)
let form = reactive({ name: '' })
let formid = ref(0)
const opendialog = (item?: any) => {
    console.log(item)
    if (item.id) {
        form.name = item.name
        formid.value = item.id
        dialogVisible.value = true
    } else {
        dialogVisible.value = true
    }

}




const handleClose = () => {
    form.name = ""
    dialogVisible.value = false
    formid.value = 0
}

const adduser = (id: any) => {
    if (formid.value != 0) {
        edit_rater({ name: form.name, id: formid.value }).then(res => {
            if (res.code == 200) {
                ElMessage.success('修改成果')
                gettable()
            } else {
                ElMessage.warning('修改失败')
            }
            handleClose()
        })
    } else {
        addRater({ name: form.name }).then(res => {
            if (res.code == 200) {
                ElMessage.success('新增成功')
                gettable()
            } else {
                ElMessage.warning('新增失败')
            }
            handleClose()
        })
    }

}


const deluser = (item: any) => {
    del_rater({ id: item.id }).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success('删除成功')
            gettable()
        } else {
            ElMessage.warning('删除失败')
        }
        handleClose()
    })
}
</script>
    
<style lang="less" scoped>
.setting {

    // background: white;
    // padding: 30px;
    .el-card {
        min-height: calc(100vh - 104px);

    }
}
</style>